<template>
	<view>
		<scroll-view :scroll-y="true" class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">项目负责信息</block>
			</cu-custom>
			<view class="infocontent">
				<view class="h6">检查人（签名）：</view>
				<view class="inputunitbox">
					<input class="inputunit" type="text" v-model="unittext" placeholder="检查人（签名）：">
					<button @click="getunit" type="primary" plain="true" class="mini-btn border cu-btn bg-blue shadow"
						size="mini">{{queryData.checkCompany == null ? '提交' : '编辑'}}</button>
				</view>
			</view>

			<view class="infocontent margin-top">
				<view class="h6">项目专家团队成员信息一览表</view>
				<view class="list">
					<view class="h-table">
						<view class="h-tr h-tr-3 h-thead">
							<view class="h-td" style="width: 15%;">组别</view>
							<view class="h-td" style="width: 15%;">姓名</view>
							<view class="h-td" style="width: 20%;">职务</view>
							<view class="h-td" style="width: 30%;">项目分工</view>
							<view class="h-td" style="width: 20%;">操作</view>
						</view>
						<view class="h-tr h-tr-3" v-for="(item,index) in teamData" :key="index">
							<view class="h-td" style="width: 15%;">{{item.teamGroup_dictText}}</view>
							<view class="h-td" style="width: 15%;">{{item.name}}</view>
							<view class="h-td" style="width: 20%;">{{item.position_dictText}}</view>
							<view class="h-td" style="width: 30%;">{{item.job}}</view>
							<view class="h-td" style="width: 20%;">
								<view class="button edit" @click="peopledrawshow('delete',item)">删除</view>
								<view class="button delete" @click="peopledrawshow('edit',item)">编辑</view>
							</view>
						</view>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-blue" @click="peopledrawshow">新增人员信息</button>
				</view>
			</view>

			<view class="infocontent margin-top">
				<view class="h6">项目总体安排</view>
				<view class="list">
					<view class="h-table">
						<view class="h-tr h-tr-3 h-thead">
							<view class="h-td" style="width: 11%;">序号</view>
							<view class="h-td" style="width: 21%;">预计日期</view>
							<view class="h-td" style="width: 53%;">内容</view>
							<view class="h-td" style="width: 15%;">负责人</view>
						</view>
						<view class="h-tr h-tr-3">
							<view class="h-td" style="width: 11%;">1</view>
							<view class="h-td" style="width: 21%;">{{queryData.checkTime}}</view>
							<view class="h-td" style="width: 53%;">现场隐患排查</view>
							<view class="h-td" style="width: 15%;">{{planData.checkBy}}</view>
						</view>
						<view class="h-tr h-tr-3">
							<view class="h-td" style="width: 11%;">2</view>
							<view class="h-td" style="width: 21%;">{{queryData.checkTime}}</view>
							<view class="h-td" style="width: 53%;">基础台账隐患排查</view>
							<view class="h-td" style="width: 15%;">{{planData.ledgerBy}}</view>
						</view>
						<view class="h-tr h-tr-3">
							<view class="h-td" style="width: 11%;">3</view>
							<view class="h-td" style="width: 21%;">{{queryData.checkTime}}</view>
							<view class="h-td" style="width: 53%;">出具现场辅导报告书</view>
							<view class="h-td" style="width: 15%;">{{planData.reportBy}}</view>
						</view>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<button v-if="planshow" class="cu-btn bg-blue" @click="plandrawshow">新增人员安排</button>
					<button v-if="!planshow" class="cu-btn bg-blue" type="warn" plain @click="plandrawshow">编辑</button>
				</view>
			</view>

			<!-- 项目专家团队成员信息一览表信息弹框 -->
			<uni-popup ref="bottompopup" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">{{peoishow ? '增加' : '编辑'}}人员信息</view>
					<uni-icons type="close" size="30" @click="compclose"></uni-icons>
				</view>
				<view class="scrollbox">
					<view class="formbox">
						<view class="border">
							<uni-forms ref="form" :modelValue="formData" :rules="rules">
								<uni-forms-item label="组别" name="teamGroup">
									<view class="biaoxing">*</view>
									<mySelect v-model="formData.teamGroup" placeholder="请选择组别" dictCode="team_group"
										space>
									</mySelect>
								</uni-forms-item>
								<uni-forms-item label="姓名" name="name">
									<view class="biaoxing">*</view>
									<input class="input" v-model="formData.name" type=text placeholder="请输入姓名" />
								</uni-forms-item>

								<uni-forms-item label="职务" name="position">
									<view class="biaoxing">*</view>
									<mySelect v-model="formData.position" placeholder="请选择组别" dictCode="team_position"
										space>
									</mySelect>
								</uni-forms-item>
								<uni-forms-item label="项目分工" name="job">
									<view class="biaoxing">*</view>
									<app-select class="job" v-model="formData.job" placeholder="请选择" :dict="plan_type"
										space>
									</app-select>
								</uni-forms-item>
							</uni-forms>
							<view class="padding flex flex-direction">
								<button v-if="peoishow" class="cu-btn bg-blue" @click="addpeople">确认新增</button>
								<button v-if="!peoishow" type="warn" plain class="cu-btn bg-blue"
									@click="addpeople('edit')">编辑</button>
							</view>
						</view>


					</view>
				</view>
			</uni-popup>

			<!-- 项目总体安排信息弹框 -->
			<uni-popup ref="planbottompopup" type="bottom" :mask-click="true">
				<view class="scortop">
					<view class="title">人员安排</view>
					<uni-icons type="close" size="30" @click="plancompclose"></uni-icons>
				</view>
				<view class="scrollbox">
					<view class="formbox">
						<view class="border">
							<uni-forms ref="form" :modelValue="formDataPlan" :rules="rules">
								<view class="h6">1.现场隐患排查:</view>
								<!-- <uni-forms-item label="预计日期" name="checkTime">
									<picker class="pickkermo" mode="date" :value="time1" start="1970-01-01"
										@change="checkTimeDateChange">
										<view class="font">
											{{queryData.checkTime}}</view>
									</picker>
								</uni-forms-item> -->

								<uni-forms-item label="负责人" name="checkBy">
									<input v-model="formDataPlan.checkBy" type="text" placeholder="请输入负责人" />
								</uni-forms-item>
								<view class="h6">2.基础台账隐患排查:</view>
								<!-- <uni-forms-item label="预计日期" name="ledgerTime">
									<picker class="pickkermo" mode="date" :value="time2" start="1970-01-01"
										@change="ledgerTimeDateChange">
										<view class="font">
											{{queryData.checkTime}}
										</view>
									</picker>
								</uni-forms-item> -->

								<uni-forms-item label="负责人" name="ledgerBy">
									<input v-model="formDataPlan.ledgerBy" type="text" placeholder="请输入负责人" />
								</uni-forms-item>
								<view class="h6">3.出具现场辅导报告书:</view>
								<!-- <uni-forms-item label="预计日期" name="reportTime">
									<picker class="pickkermo" mode="date" :value="time3" start="1970-01-01"
										@change="reportTimeDateChange">
										<view class="font">
											{{queryData.checkTime}}
										</view>
									</picker>
								</uni-forms-item> -->

								<uni-forms-item label="负责人" name="reportBy">
									<input v-model="formDataPlan.reportBy" type="text" placeholder="请输入负责人" />
								</uni-forms-item>
							</uni-forms>
							<view class="padding flex flex-direction">
								<button v-if="planshow" class="cu-btn bg-blue" @click="addplan">确认新增</button>
								<button v-if="!planshow" class="cu-btn bg-blue" type="warn" plain
									@click="editplan">编辑</button>
							</view>
						</view>


					</view>
				</view>
			</uni-popup>


		</scroll-view>
	</view>

</template>

<script>
	import appSelect from '@/components/my-componets/appSelect.vue'
	import server from '@/api/server.js'
	import {
		community
	} from '@/common/util/work.js'
	export default {
		components: {
			appSelect,
		},

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				unittext: '',
				plan_type: [],
				queryData: [],
				peoishow: true,
				planshow: true,
				time1: currentDate,
				time2: currentDate,
				time3: currentDate,
				formData: {
					teamGroup: Number,
					name: '',
					position: Number,
					job: '',
				},
				formDataPlan: {
					checkBy: '',
					checkTime: '',
					ledgerBy: '',
					ledgerTime: '',
					reportBy: '',
					reportTime: '',
				},
				teamData: [],
				range: ["", ""],
				planData: {},

				rules: {
					// 对name字段进行必填验证
					teamGroup: {
						rules: [{
							required: true,
							errorMessage: '请输入组别',
						}, ]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}, ]
					},
					position: {
						rules: [{
							required: true,
							errorMessage: '请输入职务',
						}, ]
					},
					job: {
						rules: [{
							required: true,
							errorMessage: '请输入项目分工',
						}, ]
					},

				},
			}
		},
		watch: {
			'formData.teamGroup': {
				handler(newName, oldName) {
					this.plan_type = []
					var plan_type = [{
						text: '项目总监督、负责',
						value: '项目总监督、负责'
					}, {
						text: '培训指导专家、项目主导/现场与基础管理审核',
						value: '培训指导专家、项目主导/现场与基础管理审核'
					}, {
						text: '技术顾问、现场诊断/关键数据验证',
						value: '技术顾问、现场诊断/关键数据验证'
					}]
					
						if (newName == 1) {
							this.formData.job = ''
							this.plan_type.push(plan_type[0])
						} else {
							this.plan_type = plan_type.splice(1, 3)
							this.formData.job = ''
							console.log(this.plan_type)
						}

					
				},
				immediate: true
			}
		},
		mounted() {
			this.apiteamlist()
			this.apiplanqueryByCheckId()
			this.getcheckqueryById()
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//人员弹框、删除
			peopledrawshow(str, item) {
				console.log(item)
				if (str != 'delete') {
					this.formData = {
							teamGroup: Number,
							name: '',
							position: Number,
							job: '',
						},
						this.peoishow = true
					this.$refs.bottompopup.open('top')
				}
				if (str == 'edit') {
					this.peoishow = false
					this.formData = Object.assign({},item)
				} else if (str == 'delete') {
					uni.showModal({
						title: '提示',
						content: '确定删除该成员',
						success: (showResult) => {
							if (showResult.confirm) {
								server.teamdelete(item.id).then(res => {
									console.log(res)
									if (res.data.success) {
										this.$tip.success('删除成功!')
										this.apiteamlist()
									}
								})

							}

						}
					})
				}

			},
			compclose() {
				this.$refs.bottompopup.close()
			},
			plandrawshow() {
				if (!this.planshow) {
					this.formDataPlan = this.planData
				}

				this.$refs.planbottompopup.open('top')
			},
			plancompclose() {
				this.$refs.planbottompopup.close()
			},
			checkTimeDateChange(e) {
				console.log(e)
				this.time1 = e.detail.value
				this.formDataPlan.checkTime = e.detail.value
			},
			ledgerTimeDateChange(e) {
				console.log(e)
				this.time2 = e.detail.value
				// this.formDataPlan.ledgerTime = e.detail.value
			},
			reportTimeDateChange(e) {
				console.log(e)
				this.time3 = e.detail.value
				// this.formDataPlan.reportTime = e.detail.value
			},
			//添加\修改人员
			addpeople(str) {
				if (str == 'edit') {
					this.$refs.form.validate().then(res => {
						formData.id = this.formData.id
						console.log('表单数据信息：', this.formData);
						server.teamedit(this.formData).then(res => {
							console.log(res)
							if (res.data.success) {
								this.$tip.success(res.data.message)
								this.apiteamlist()
								this.compclose()
							} else {
								this.$tip.success(res.data.message)
							}
						})
					}).catch(err => {
						console.log('表单错误信息：', err);
					})
				} else {
					this.$refs.form.validate().then(res => {
						this.formData.schoolCheckId = this.$root.$mp.query.checkId
						console.log('表单数据信息1：', this.formData);
						server.teamadd(this.formData).then(res => {
							console.log(res)
							if (res.data.success) {
								this.$tip.success(res.data.message)
								this.apiteamlist()
								this.compclose()
							} else {
								this.$tip.success(res.data.message)
							}
						})
					}).catch(err => {
						console.log('表单错误信息：', err);
					})
				}

			},
			//添加安排
			addplan() {
				this.$refs.form.validate().then(res => {
					this.formDataPlan.schoolCheckId = this.$root.$mp.query.checkId
					console.log('表单数据信息：', this.formDataPlan);
					server.planadd(this.formDataPlan).then(res => {
						console.log(res)
						if (res.data.success) {
							this.$tip.success('新增成功!')
							this.apiplanqueryByCheckId()
							this.plancompclose()
						} else {
							this.$tip.success(res.data.message)
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			//编辑安排
			editplan() {
				this.$refs.form.validate().then(res => {
					this.formDataPlan.id = this.planData.id
					console.log('表单数据信息：', this.formDataPlan);
					server.planedit(this.formDataPlan).then(res => {
						console.log(res)
						if (res.data.success) {
							this.$tip.success('编辑成功!')
							this.apiplanqueryByCheckId()
							this.plancompclose()
						} else {
							this.$tip.success(res.data.message)
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			//人员列表
			apiteamlist() {
				server.teamlist({
					schoolCheckId: this.$root.$mp.query.checkId
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						this.teamData = res.data.result.records
						this.$tip.success('获取信息成功!')
					} else {
						this.$tip.success(res.data.message)
					}
				})
			},
			//人员安排列表
			apiplanqueryByCheckId() {
				server.planqueryByCheckId(this.$root.$mp.query.checkId).then(res => {
					console.log(res)
					if (res.data.success) {
						if (res.data.result == null) {
							this.planshow = true
						} else {
							this.planshow = false
							this.planData = res.data.result
						}
						this.$tip.success('获取信息成功!')




					} else {
						this.$tip.success(res.data.message)
					}
				})
			},
			//提交排查单位
			getunit() {
				uni.showModal({
					title: '提示',
					content: '确定提交！',
					success: (showResult) => {
						if (showResult.confirm) {
							let object = {
								id: this.$root.$mp.query.checkId,
								checkCompany: this.unittext,
							}
							server.schoolcheckedit(object).then(res => {
								console.log(res)
								if (res.data.success) {
									this.$tip.success('提交成功!')
									this.getcheckqueryById()
								} else {
									this.$tip.error(res.data.success)
								}

							})
						}

					}
				})

			},
			//查询是否有排查单位
			getcheckqueryById() {
				server.schoolcheckqueryById({
					id: this.$root.$mp.query.checkId
				}).then(res => {
					console.log(res)
					this.queryData = res.data.result
					this.formDataPlan.ledgerTime = this.queryData.checkTime
					this.formDataPlan.reportTime = this.queryData.checkTime
					if (this.queryData.checkCompany != null) {
						this.unittext = this.queryData.checkCompany
					}

				})
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.cu-form-group uni-picker::after {
		content: unset;
	}


	.formbox {
		background: white;
		padding: 10px;

		.border {
			padding: 10px;
			border: 1px solid #dddd;
			border-radius: 20px;
			box-shadow: 1px 1px 13px 0px #ccc;
			margin-bottom: 10px;

			.h6 {
				font-weight: bold;
				font-size: 14px;
				margin-top: 20px;
			}
		}

		/deep/.is-direction-left {
			border-bottom: 1px solid #ddd;
		}

		/deep/.uni-forms-item__inner {
			padding: 6px 0;

		}

		/deep/.is-input-error-border {
			border: unset !important;
		}

		/deep/.uni-forms-item__label .label-text {
			font-size: 15px;
			color: grey;
		}

		.uni-input-placeholder {
			color: #8799a3;
		}
	}

	.biaoxing {
		position: absolute;
		left: -9px;
		top: 17px;
		font-size: 26px;
		color: red;
	}

	.icon-ditu-dibiao {
		font-size: 28px;
		color: #6363ea;
		float: right;
		position: absolute;
		right: 7px;
	}

	.infocontent {
		background-color: white;

		.h6 {
			padding: 10px;
			font-size: 14px;
			font-weight: bold;
		}
	}

	.h-table .h-td .button.edit,
	.h-table .h-td .button.delete {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 5px;
		padding-right: 5px;
		box-sizing: border-box;
		font-size: 11px;
		text-align: center;
		text-decoration: none;
		line-height: 26px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		cursor: pointer;
		background-color: rgba(0, 0, 0, 0);
		border-radius: 20px;
	}

	.h-table .h-td .button.edit {
		color: #e64340;
		border: 1px solid #e64340;
	}

	.h-table .h-td .button.delete {
		color: white;
		background-color: #0081ff;
	}

	.pickkermo {
		width: 100%;
		height: 36px;
		line-height: 36px;
	}

	.inputunitbox {
		padding: 5px;

		.inputunit {
			width: 250px;
			float: left;
			border: 1px solid #0081ff;
			padding: 0 5px;
			line-height: 36px;
			height: 36px;
			border-radius: 5px;
			background-color: #f8f8f8;
		}

		.mini-btn {
			margin-left: 5px;
		}
	}

	/deep/.uni-input-wrapper,
	/deep/.cu-form-group uni-input {
		width: 200px;
	}

	/deep/.cu-form-group {
		z-index: 0 !important;
	}

	.formbox .job .uni-input-placeholder {
		color: #333;
		font-size: 15px;
	}
</style>
